<!-- 可拖动弹出框 -->
<template>
  <el-dialog
    :title="popSetting.title"
    :visible.sync="popSetting.popShow"
    :width="popSetting.width"
    v-el-drag-dialog
    :custom-class="popSetting.className"
    :close-on-click-modal="false"
    :append-to-body="true"
    :before-close="popClose"
  >
    <slot name="content" ></slot>
    <!-- 默认定义footer -->
    <span v-if="footerShow" slot="footer" class="dialog-footer">
        <el-button @click="popClose">{{popSetting.footerBtnText.close}}</el-button>
        <el-button type="primary" @click="popAffirmHandle">{{popSetting.footerBtnText.affirm}}</el-button>
    </span>

    <!-- 自定义footer -->
    <slot v-else name="definedFooter" slot="footer" ></slot>
  </el-dialog>

</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog'
  export default {
    name :'drag-pop',
    directives: { elDragDialog },
    props : {
      footerShow: {
        type: Boolean,
        default: true
      },
      // popSetting弹出框默认设置
      popSetting: {
        type: Object,
        default: {
          title : '提示',
          width : '50%',
          popShow: false,
          className: '',
          footerBtnText : {
            close: '取消',
            affirm: '完成'
          }
        }
      },
    },

    methods: {
      // 关闭弹出框
      popClose(){
        this.$emit('popClose')
      },
      // popAffirmHandle 点击确认
      popAffirmHandle(){
        this.$emit('popAffirmHandle')
      }
    }
  }
</script>

<style scoped lang="sass" rel="stylesheet/stylus">

</style>
